<%@page import="com.wanmait.hotelManagement.vo.Passenger"%>
<%@page import="java.util.List"%>
<%@page import="com.wanmait.hotelManagement.vo.Pager"%>
<%@page import="com.wanmait.hotelManagement.vo.RoomType"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%String path = request.getContextPath(); %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DJ Party Night</title>
<!-- 房间图片展示 -->
<link href="<%=path%>/hotel/css/shouye.css" rel="stylesheet">
<!-- Stylesheets -->
<link href="<%=path%>/hotel/css/bootstrap.css" rel="stylesheet">
<link href="<%=path%>/hotel/css/style.css" rel="stylesheet">
<!-- Responsive File -->
<link href="<%=path%>/hotel/css/responsive.css" rel="stylesheet">
<link href="<%=path%>/hotel/css/styleYuyue.css" rel="stylesheet">

<link rel="shortcut icon" href="<%=path%>/hotel/images/favicon.png" type="image/x-icon">
<link rel="icon" href="<%=path%>/hotel/images/favicon.png" type="image/x-icon">

<!-- Responsive Settings -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="<%=path%>/hotel/js/modernizr-custom-v2.7.1.min.js"></script>
<script src="<%=path%>/hotel/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="<%=path%>/hotel/js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="<%=path%>/hotel/js/jquery-ui.min.js"></script>
<script src="<%=path%>/hotel/js/script.js"></script>



<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="<%=path%>/hotel/js/respond.js"></script><![endif]-->
<!-- 图片展示script -->
<script>
	$(document).ready(function(){
var $miaobian=$('.Xcontent08>div');
var $huantu=$('.Xcontent06>img');
var $miaobian1=$('.Xcontent26>div');
$miaobian.mousemove(function(){miaobian(this);});
$miaobian1.click(function(){miaobian1(this);});
function miaobian(thisMb){
	for(var i=0; i<$miaobian.length; i++){
		$miaobian[i].style.borderColor = '#dedede';
	}
	thisMb.style.borderColor = '#cd2426';

	$huantu[0].src = thisMb.children[0].src;
	}
	function miaobian1(thisMb1){
		for(var i=0; i<$miaobian1.length; i++){
		$miaobian1[i].style.borderColor = '#dedede';
		}
//		thisMb.style.borderColor = '#cd2426';
		$miaobian.css('border-color','#dedede');
		thisMb1.style.borderColor = '#cd2426';
		$huantu[0].src = thisMb1.children[0].src;
	}
		$(".Xcontent33").click(function(){
		var value=parseInt($('.input').val())+1;
		$('.input').val(value);
	})

	$(".Xcontent32").click(function(){	
		var num = $(".input").val()
		if(num>0){
			$(".input").val(num-1);
		}			
		
	})

	})
</script>
<!-- 图片展示结束 -->

<style type="text/css">
	.appointments{
		margin: 0 auto;
		width:100%;
		vertical-align:middle;
	}
	.appointment{
		display: block;
		width: 200px;
		background-color:#fab740;
		border-radius: 5px;
		color:#fff;
		height: 50px;
		text-align: center;
		line-height: 50px;
		font-size: 18px;
		border: 1px solid #fab740;
	}
	.Xcontent001{
		height: 530px;
	}
	.Xcontent07{
		width:170px;
		height: 99px;
		border: 1px solid #ccc;
		margin-bottom: 3px;
	}
</style>

</head>

<body>

<div class="page-wrapper">
    <!-- Preloader -->
    <div class="preloader"><div class="icon"></div></div>

    <!-- Main Header -->
    <header class="main-header header-style-one">

        <!-- Header Upper -->
        <jsp:include page="/hotel/include/head.jsp"></jsp:include>
        <!--End Header Upper-->

        <!-- Mobile Menu  -->
        <div class="mobile-menu">
            <div class="close-btn"><span class="icon flaticon-targeting-cross"></span></div>
            <div class="menu-backdrop"></div>
            <div class="nav-logo"><a href="index.html"><img src="<%=path%>/hotel/images/nav-logo.png" alt="" title=""></a></div>
            <nav class="menu-box">
                <div class="menu-outer"><!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header--></div>
            </nav>
            <div class="nav-bottom">
                <div class="copyright">Hotera  &copy;  2020 All Right Reserved</div>
                <!--Social Links-->
                <div class="social-links">
                    <ul class="clearfix">
                        <li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
                        <li><a href="#"><span class="fab fa-twitter"></span></a></li>
                        <li><a href="#"><span class="fab fa-vimeo-v"></span></a></li>
                    </ul>
                </div>
            </div>
        </div><!-- End Mobile Menu -->

    </header>
    <!-- End Main Header -->


    <!-- Banner Section -->
    <section class="page-banner ext-banner">
        <div class="image-layer" style="background-image:url(<%=path%>/hotel/images/background/banner-image-7.jpg);"></div>
        <div class="banner-bottom-pattern"></div>

        <div class="banner-inner">
            <div class="auto-container">
                <div class="inner-container clearfix">
                    
                </div>
            </div>
        </div>
    </section>
    <!--End Banner Section -->

     <!--Room Single Section-->
    <section class="room-single">
        <div class="circles-two">
            <div class="c-1"></div>
            <div class="c-2"></div>
        </div>
        <span class="dotted-pattern dotted-pattern-3"></span>
        <span class="tri-pattern tri-pattern-3"></span>
        <div class="auto-container">
            <div class="upper-box wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1500ms">
            <%RoomType roomType = (RoomType)request.getAttribute("roomType"); %>
            <%Passenger loginUser = (Passenger)session.getAttribute("loginUser"); %>
                <div class="upper-inner">
                    <h2><%=roomType.getRoomName() %></h2>
                    <div class="pricing clearfix">
                        <div class="price">￥<span><%=roomType.getRoomPrice() %></span> / 一晚</div>
                        <!-- <div class="rating">
                            <span class="fa fa-star"></span>
                            <span class="fa fa-star"></span>
                            <span class="fa fa-star"></span>
                            <span class="fa fa-star"></span>
                            <span class="fa fa-star"></span>
                        </div> -->
                    </div>
                    <div class="text">
                        <p><%=roomType.getRemarks() %></p>
                        <!-- <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet consectetur adipisci velit sed quia non numquam eius modi tempora incidunt labore dolore sit magnam aliquam quaerat voluptatem.</p> -->
                    </div>
                </div>
            </div>

            <div class="details-box wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1500ms">
                <div class="details-inner">
                    <h3>设施包括</h3>
                    <div class="text">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sitvou ptatem accusantium doloremque laudantium.</div>
                    <ul class="info clearfix">
                        <li><span class="icon flaticon-tv"></span> 电视</li>
                        <li><span class="icon flaticon-wifi"></span> 无线网络</li>
                        <li><span class="icon flaticon-coffee-cup"></span> 早餐</li>
                        <li><span class="icon flaticon-bathtub"></span> 浴缸</li>
                        <li><span class="icon flaticon-stones"></span> 水疗</li>
                        <li><span class="icon flaticon-newspaper"></span> 报纸</li>
                        <li><span class="icon flaticon-wine-glass"></span> 小型酒吧</li>
                        <li><span class="icon flaticon-dumbbell"></span> 健身房</li>
                    </ul>
                </div>
            </div>

            <div class="lower-box">
                <div class="row clearfix">
                
                <!-- 房间图片展示 -->
                <div class="Xcontent">
					<ul class="Xcontent01 Xcontent001" >
						<div class="Xcontent06"><img src="<%=path%>/hotel/images/room/<%=roomType.getPictures().get(0).getImages()%>"></div>
						
							<!-- 预约 -->
					        <!-- <div id="yuYue">
				            <section class="rooms-details">
						        <div class="col-md-4 col-sm-6 col-xs-12">
						            <div class="sidbar-content">
						                <h3>Room Reservation</h3>
						                <div class="date">
						                    <i class="fa fa-calendar" aria-hidden="true"></i>
						                    <input type="text" name="date" placeholder="Araival date" id="datepicker">
						                    <i class="fa fa-calendar" aria-hidden="true"></i>
						                    <input type="text" name="date" placeholder="Departure date" id="datepickerone">
						                </div>
						                <select class="custom-select-box">
						                    <option>Adults</option>
						                    <option>18 years</option>
						                    <option>20 years</option>
						                    <option>25 years</option>
						                    <option>30 years</option>
						                </select>
						                <select class="custom-select-box">
						                    <option>Children</option>
						                    <option>5 years</option>
						                    <option>8 years</option>
						                    <option>12 years</option>
						                    <option>15 years</option>
						                </select>
						                <select class="custom-select-box">
						                    <option>Room Type</option>
						                    <option>Double Bed</option>
						                    <option>Air Conditioning</option>
						                    <option>Outdoor Kitchen</option>
						                </select>
						                <a href="" class="btn-one">Book Now</a>
						            </div>
						        </div>
						    </section> 
						    </div> -->
			        		<!-- 结束 -->
			        		<div class="Xcontent08" id="xiaoTu">
							<%for(int i=0; i<=roomType.getPictures().size()-1; i++)
			                {%>
								<div class="Xcontent07"><img src="<%=path%>/hotel/images/room/<%=roomType.getPictures().get(i).getImages()%>"></div>
								<!-- <div class="Xcontent09"><img src="images/shangpinxiangqing/X7.png"></div>
								<div class="Xcontent10"><img src="images/shangpinxiangqing/X8.png"></div>
								<div class="Xcontent11"><img src="images/shangpinxiangqing/X9.png"></div>
								<div class="Xcontent12"><img src="images/shangpinxiangqing/X10.png"></div> -->							
			                <%}%>
					        </div>
					</ul>
					<div class="appointments" align="center">
						<a class="appointment" id="reservation">预约</a>
			        </div>
				</div>
				<!-- 预约判断是否登录 -->
				<script type="text/javascript">
				$(function(){
					$("#reservation").click(function(){
						<%if(loginUser==null)
						{%>
							location.href="<%=path%>/hotel/login/index.jsp";
							<%-- $(this).attr("href","<%=path%>/hotel/login/index.jsp"); --%>
						<%}
						else{%>
							location.href="<%=path%>/ReservationServlet?action=show&roomTypeId=<%=roomType.getId()%>";
						<%}%>
					});
				})
				</script>
				<!-- 预约判断是否登录结束 -->
				
				<!-- 房间图片展示结束 -->
				
				
				
				
				
				<!-- 图片css -->
                <style type="text/css">
                	/* .Xcontent{
                		width: 70%;
                		margin-right: 20%;
                	} */
                	.Xcontent06{
						width: 60%;
						height: 80%;
						margin-left: 10%;
					}
					/* .Xcontent07{
						width: 10%;
						float: left;
                		margin-left: 5%;
					} */
					#xiaoTu{
						margin-bottom:1%;
						width: 25%;
						height: 20%;
					}
				/* 预约css */
					/* #yuYue{
						width: 1000px;
						overflow: hidden;
					} */
				/* 预约css结束 */
                </style>
                <!-- 图片css结束 -->
                    <%-- <div class="image-block col-lg-6 col-md-6 col-sm-12 wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1500ms">
                    <figure class="image"><a href="<%=path%>/hotel/images/room/<%=roomType.getPictures().get(i).getImages()%>" class="lightbox-image"><img src="<%=path%>/hotel/images/room/<%=roomType.getPictures().get(i).getImages()%>" alt="" title=""></a></figure>
                	</div> --%>
                    <%-- <div class="image-block col-lg-6 col-md-6 col-sm-12 wow fadeInUp" data-wow-delay="300ms" data-wow-duration="1500ms">
                        <figure class="image"><a href="<%=path%>/hotel/images/resource/featured-image-55.jpg" class="lightbox-image"><img src="<%=path%>/hotel/images/resource/featured-image-55.jpg" alt="" title=""></a></figure>
                    </div> --%>
                </div>
            </div>
        </div>
    </section>

    <!--Rooms Section-->
    <section class="rooms-section alternate">
        <span class="dotted-pattern dotted-pattern-3"></span>
        <span class="tri-pattern tri-pattern-3"></span>
        <div class="auto-container">
            <div class="sec-title centered">
                <h2>客房与套房</h2>
                <div class="lower-text">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</div>
            </div>
            <!-- 剩余客房类型css -->
            <style type="text/css">
            	#miaoShu{
            		height: 100px;
            	}
            </style>
            <!-- 剩余客房类型css结束 -->
            <!-- 剩余客房类型展示 -->
            <div class="row clearfix" id="restRoomType">
                <%List<RoomType> restRoomType = (List<RoomType>)request.getAttribute("restRoomType");
                int delay = 0;
                
                for(RoomType restType:restRoomType)
                {
                	String dataDelay = delay+"ms";
                	delay+=300;
                %>
                	<div class="room-block-two col-lg-4 col-md-6 col-sm-12 wow fadeInUp" data-wow-delay="<%=dataDelay %>" data-wow-duration="1500ms">
                    <div class="inner-box">
                        <div class="image-box">
                            <figure class="image"><a href="<%=path %>/RoomServlet?action=singleRoom&typeId=<%=restType.getId()%>"><img src="<%=path%>/hotel/images/room/<%=restType.getPictures().get(0).getImages() %>" alt="" title=""></a></figure>
                        </div>
                        <div class="lower-box">
                            <h4><%=restType.getRoomName() %></h4>
                            <div class="pricing clearfix">
                                <div class="price">From ￥<span><%=restType.getRoomPrice() %></span></div>
                                <!-- <div class="rating">
                                    <span class="fa fa-star"></span>
                                    <span class="fa fa-star"></span>
                                    <span class="fa fa-star"></span>
                                    <span class="fa fa-star"></span>
                                    <span class="fa fa-star"></span>
                                </div> -->
                            </div>

                            <div class="text" id="miaoShu"><%=restType.getRemarks()%></div>
                            <div class="link-box"><a href="<%=path %>/RoomServlet?action=singleRoom&typeId=<%=restType.getId()%>" class="theme-btn btn-style-three"><span class="btn-title">预约一下</span></a></div>
                        </div>
                    </div>
                </div>
                <%}
                %>
                <%-- <div class="room-block-two col-lg-4 col-md-6 col-sm-12 wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1500ms">
                    <div class="inner-box">
                        <div class="image-box">
                            <figure class="image"><a href="room-single.html"><img src="<%=path%>/hotel/images/resource/featured-image-21.jpg" alt="" title=""></a></figure>
                        </div>
                        <div class="lower-box">
                            <h4>Balcony Room</h4>
                            <div class="pricing clearfix">
                                <div class="price">From <span>$50.00</span></div>
                                <div class="rating">
                                    <span class="fa fa-star"></span>
                                    <span class="fa fa-star"></span>
                                    <span class="fa fa-star"></span>
                                    <span class="fa fa-star"></span>
                                    <span class="fa fa-star"></span>
                                </div>
                            </div>

                            <div class="text">Excepteur sint occaecat cupidatat dent in sun in culpa qui officia deserunt mollit anim id est.</div>
                            <div class="link-box"><a href="room-single.html" class="theme-btn btn-style-three"><span class="btn-title">Check Availability</span></a></div>
                        </div>
                    </div>
                </div> --%>
                

                <%-- <div class="room-block-two col-lg-4 col-md-6 col-sm-12 wow fadeInUp" data-wow-delay="300ms" data-wow-duration="1500ms">
                    <div class="inner-box">
                        <div class="image-box">
                            <figure class="image"><a href="room-single.html"><img src="<%=path%>/hotel/images/resource/featured-image-22.jpg" alt="" title=""></a></figure>
                        </div>
                        <div class="lower-box">
                            <h4>Deluxe Room</h4>
                            <div class="pricing clearfix">
                                <div class="price">From <span>$50.00</span></div>
                                <div class="rating">
                                    <span class="fa fa-star"></span>
                                    <span class="fa fa-star"></span>
                                    <span class="fa fa-star"></span>
                                    <span class="fa fa-star"></span>
                                    <span class="fa fa-star"></span>
                                </div>
                            </div>

                            <div class="text">Excepteur sint occaecat cupidatat dent in sun in culpa qui officia deserunt mollit anim id est.</div>
                            <div class="link-box"><a href="room-single.html" class="theme-btn btn-style-three"><span class="btn-title">Check Availability</span></a></div>
                        </div>
                    </div>
                </div>

                <div class="room-block-two col-lg-4 col-md-6 col-sm-12 wow fadeInUp" data-wow-delay="600ms" data-wow-duration="1500ms">
                    <div class="inner-box">
                        <div class="image-box">
                            <figure class="image"><a href="room-single.html"><img src="<%=path%>/hotel/images/resource/featured-image-23.jpg" alt="" title=""></a></figure>
                        </div>
                        <div class="lower-box">
                            <h4>Luxury Room</h4>
                            <div class="pricing clearfix">
                                <div class="price">From <span>$50.00</span></div>
                                <div class="rating">
                                    <span class="fa fa-star"></span>
                                    <span class="fa fa-star"></span>
                                    <span class="fa fa-star"></span>
                                    <span class="fa fa-star"></span>
                                    <span class="fa fa-star"></span>
                                </div>
                            </div>

                            <div class="text">Excepteur sint occaecat cupidatat dent in sun in culpa qui officia deserunt mollit anim id est.</div>
                            <div class="link-box"><a href="room-single.html" class="theme-btn btn-style-three"><span class="btn-title">Check Availability</span></a></div>
                        </div>
                    </div>
                </div> --%>

            </div>
            <!-- 剩余客房类型展示结束 -->
            <!-- 分页数字开始 -->
            <div class="shuZi">
            	<%Pager restPager = (Pager)request.getAttribute("restPager");
            	for(int i=1; i<=restPager.getPageCount(); i++)
            	{%>
            		<a class="no" href="javascript:void(0);"><%=i%></a>
            	<%}
            	%>
            </div>
            <!-- 分页数字结束 -->
            <!-- 分页数字css -->
            <style type="text/css">
            	.shuZi{
            		width: 10%;
            		margin: auto;
            		text-align: center;
            	}
            </style>
            <!-- 分页数字css -->
            <!-- 给分页数字添加点击事件 -->
            <script type="text/javascript">
            	$(function(){
            		$(".no").click(function(){
            			var num = $(this).html();
            			$.ajax({
            				url:"<%=path%>/RoomServlet",
            				type:"post",
            				data:{action:"getRestRoomType",restPageNo:num,typeId:<%=request.getParameter("typeId")%>},
            				success:function(mes){
            					$("#restRoomType").html(mes);
            				}
            			});
            		});
            	});
            </script>
            <!-- 事件结束 -->
        </div>
    </section>

    <!-- Main Footer -->
    <jsp:include page="/hotel/include/footer.jsp"></jsp:include>

</div>
<!--End pagewrapper--><!--Scroll to top--><div class="scroll-to-top scroll-to-target" data-target="html"><span class="flaticon-up-arrow"></span></div>

<script src="<%=path%>/hotel/js/jquery.js"></script>
<script src="<%=path%>/hotel/js/popper.min.js"></script>
<script src="<%=path%>/hotel/js/bootstrap.min.js"></script>
<script src="<%=path%>/hotel/js/jquery-ui.js"></script>
<script src="<%=path%>/hotel/js/jquery.fancybox.js"></script>
<script src="<%=path%>/hotel/js/owl.js"></script>
<script src="<%=path%>/hotel/js/scrollbar.js"></script>
<script src="<%=path%>/hotel/js/mixitup.js"></script>
<script src="<%=path%>/hotel/js/appear.js"></script>
<script src="<%=path%>/hotel/js/wow.js"></script>
<script src="<%=path%>/hotel/js/custom-script.js"></script>


</body>
</html>